<ng-template #tooltipTemplate>
  <p *ngIf="preHtmlTemplate">
    <ng-template *ngTemplateOutlet="preHtmlTemplate"></ng-template>
  </p>

  <ng-container *ngIf="preHtmlTemplate && (customHtmlTemplate || mainHtml || postHtmlTemplate)">
    <br /><br />
  </ng-container>

  <p *ngIf="customHtmlTemplate">
    <ng-template *ngTemplateOutlet="customHtmlTemplate"></ng-template>
  </p>

  <p *ngIf="mainHtml" [innerHTML]="mainHtml"></p>

  <ng-container *ngIf="(customHtmlTemplate || mainHtml) && postHtmlTemplate">
    <br /><br />
  </ng-container>

  <p *ngIf="postHtmlTemplate">
    <ng-template *ngTemplateOutlet="postHtmlTemplate"></ng-template>
  </p>
</ng-template>

<span
  role="button"
  class="help-tooltip-button"
  container="body"
  [title]="title"
  tabindex=0
  popoverClass="help-popover"
  [attr.aria-pressed]="isPopoverOpened"
  [ngbPopover]="tooltipTemplate"
  [placement]="tooltipPlacement"
  [autoClose]="autoClose"
  (onHidden)="onPopoverHidden()"
  (onShown)="onPopoverShown()"
>
  <my-global-icon [iconName]="iconName"></my-global-icon>
</span>
